<template>
  <div class="mycomments">
    <ul>
      <li
        v-for="(i, index) in comment"
        :key="index"
        @click="gotoArticle(i.nid)"
      >
        <div class="text">{{ i.cotext }}</div>
        <div class="commentfooter">
          <div class="title">发表于：《{{ commentname[index] }}》</div>
          <div class="createtiem">
            发表日期：{{ i.createtime.split("T")[0] }}
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      comment: [],
      article: "",
      commentname: [],
      uid: "",
    };
  },
  methods: {
    getUname() {
      this.uid = this.$store.state.uid; //uid从session中回去
      let params = `uid=${this.uid}`;
      let url = "http://192.168.1.2:8888/getuname";
      this.axios.post(url, params).then((res) => {
        this.$parent.unickname = res.data.result[0].unickname; //设置父路由的用户名
        if (res.data.result[0].ulogo != null) {
          this.$parent.ulogo = res.data.result[0].ulogo; //设置父路由的头像
        }
      });
    },
    getComment() {
      let params = `uid=${this.uid}`;
      let url = "http://192.168.1.2:8888/getcomment";
      this.axios.post(url, params).then((res) => {
        this.comment = res.data.result;
        if (res.data.result == undefined) {
          return;
        }
        this.$parent.commentcount = res.data.result.length; //设置父路由的评论数
        for (let i of res.data.result) {
          // console.log(i);
          let params2 = `coid=${i.coid}`;
          let url2 = "http://192.168.1.2:8888/getcommenttitle";
          this.axios.post(url2, params2).then((res) => {
            // console.log(res);
            this.commentname.push(res.data.result[0].nname);
          });
        }
      });
    },
    // 跳转点击页
    gotoArticle(nid) {
      this.$router.push(`/article?nid=${nid}`);
    },
  },
  mounted() {
    this.getUname();
    this.getComment();
    // console.log(this.commentname);
  },
};
</script>

<style lang="scss" scoped>
.mycomments {
  width: 680px;
  li {
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
  }
  .text {
    font-size: 20px;
    cursor: pointer;
  }
  .commentfooter {
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
  }
  .title {
    font-size: 14px;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: left;
    overflow: hidden;
    width: 450px;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
  }
  .createtiem {
    font-size: 14px;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: right;
  }
}
</style>